<template>
  <div>

    等级{{ categoryLevel }} 父类id:{{ parentId }}
    <span v-if="categoryLevel == 1">一级分类</span>
    <span v-if="categoryLevel == 2">二级分类</span>
    <span v-if="categoryLevel == 3">三级分类</span>
    <section>

      <el-button
        type="primary"
        class="el-icon-back"
        @click="colt()"
        v-if="categoryLevel > 1"
        >返回</el-button>

      <el-button type="primary"
       class="el-icon-plus"
        @click="addbotfun()"
        >增加</el-button>

      <el-button type="danger"
       class="el-icon-delete"
        @click="delsfun()"
        >批量删除</el-button>

    </section>
    <el-dialog :title="title" :visible.sync="dialogFormVisible">
      <el-form
        :model="ruleForm"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm">

        <el-form-item label="分类名称" prop="redirectName">
          <el-input v-model="ruleForm.redirectName"></el-input>
        </el-form-item>
        <el-form-item label="排序值" prop="name">
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary"
           @click="submitForm('ruleForm')"
            >确定</el-button>

          <el-button 
          @click="resetForm('ruleForm')"
          >重置</el-button>
        </el-form-item>
        
      </el-form>

    </el-dialog>
    <el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" > </el-table-column>
      <el-table-column label="分类名称"  prop="categoryName">
      </el-table-column>
      <el-table-column prop="categoryRank" label="排序值" >
      </el-table-column>
      <el-table-column prop="createTime" label="添加时间" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="name" label="操作">
        <template slot-scope="scope">
          <el-button
            type="primary"
            size="small"
            @click="handleEdit(scope.$index, scope.row)"
            >修改</el-button
          >
          <el-button
            type="success"
            size="small"
            v-if="categoryLevel<3"
            @click="handlenext(scope.$index, scope.row)"
            >下级分类</el-button
          >
          <el-popover placement="top" width="260px" height="250px">
            <p>这一段内容确定删除吗？</p>
            <div style="text-align: right; margin: 0">
              <el-button size="mini" @click="cancol()">取消</el-button>
              <el-button
                type="primary"
                size="mini"
                @click="handleDelete(scope.$index, scope.row)"
                >确定</el-button
              >
            </div>

            <el-button slot="reference"  type="danger"  size="small">删除</el-button>
          </el-popover>
        </template>
      </el-table-column>
     
    </el-table>
    <div class="jz">
      <el-pagination
      background
      layout="prev, pager, next"
      :total="1000"
      @current-change="handleCurrentChange"
    >
    </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title:"增加",
      tableData: [],
      multipleSelection: [],//
      dialogFormVisible: false,
      parentId:0,//父类id
      categoryLevel:1,//等级
      ruleForm: {
        redirectName: "",
        name: "",
      },
    };
  },
  mounted() {
    this.getfun(1);
    console.log(this.categoryLevel);
  },
  methods: {
    handleCurrentChange(val) {
      this.getfun(val);
    },
    cancol() {//关闭窗口
      document.body.click();
    },
    async handleDelete(index, row) {//删除1个****
      let arry = [row.categoryId];
      let result = await this.$http.delete("/categories", {
        data: {
          ids: arry,
        },
      });
      console.log(row);
      this.cancol();
      this.getfun(1)
    },
    async delsfun(){//删除多个 批量删除********
       let newArry=[];
        this.multipleSelection.map(item=>{
           newArry.push(item.categoryId)
        })

        let result = await this.$http.delete("/categories", {
        data: {
          ids: newArry,
        },
      });
    
      this.cancol();
      this.getfun(1)
    },
    submitForm(formName) {//创建按钮
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.title == "增加") {
            this.addlp()
            console.log("增加");
          } else {
           this.deput()
            console.log("修改");
           
          }
        } else {
          return false;
        }
      });
    },
    colt() {//返回
    
      this.categoryLevel--;
      if(this.categoryLevel==1){
        this.parentId=0;
      }else if(this.categoryLevel==2){
      this.parentId=this.parentTe;
      }
      this.getfun(1);
    },
     handleEdit(index, row) {//修改
      this.title = "修改",
      this.dialogFormVisible = true,
      this.ruleForm.name = row.categoryRank,
      this.ruleForm.redirectName = row.categoryName
      this.categoryLevel=row.categoryLevel
      this.categoryId=row.categoryId
      this.parentId=row.parentId
      console.log(row);
      
    },
    async deput(){//修改
      let result = await this.$http.put("/categories",
        {
          categoryId:this.categoryId,
          categoryLevel:this.categoryLevel,
          categoryName: this.ruleForm.redirectName,
          categoryRank: this.ruleForm.name,
          parentId:this.parentId,
        })
        this.getfun(1)
        this.dialogFormVisible = false
        
    },

    handlenext(index, row) {//下级
      if(this.categoryLevel==3){
        this.$message("没有下一级了")
        return false;
      }
       this.categoryLevel++;
       if(this.categoryLevel==2){
        this.parentTe=row.categoryId;
       }
       this.parentId=row.categoryId;
       this.getfun(1)

    },
    async getfun(page) {//获取分页
      let result = await this.$http.get("/categories", {
        params: {
          pageNumber: page,
          pageSize: 10,
          categoryLevel: this.categoryLevel,
          parentId:this.parentId,
        },
      });
    this.tableData = result.data.list;
     },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    addbotfun(){//点击增加
    this.title = "增加",
      this.dialogFormVisible = true
     this.ruleForm.name = "",
     this.ruleForm.redirectName = ""
    },
   async addlp(){//增加
    let result = await this.$http.post("/categories",
        {
          categoryLevel: this.categoryLevel,
          categoryName:  this.ruleForm.redirectName,
          categoryRank: this.ruleForm.name,
          parentId: this.parentId,
        })
        this.dialogFormVisible = false
        this.getfun(1);
       ;
    }
  },
};
</script>

<style></style>
